<template>
  <el-upload class="upload"
             :action="uploadApi"
             :accept="fileType"
             :show-file-list="false"
             :before-upload="beforeUpload"
             :on-success="uploadSuccess"
             :headers="headers"
             :data="sendData"
             v-if="btnDisplay">
    <auth-button :size="btnSize" type="primary" :label="batchUploadName" :menuCode="menuCode" :perms="perms"></auth-button>
  </el-upload>
</template>

<script>
  import store from '@/store'
  import AuthButton from '@/components/auth/authButton'
  import httpConfig from '@/../config/httpConfig'
  export default {
    components: {AuthButton},
    props: {
      // 所属菜单Code-->全局唯一
      menuCode: {
        type: String,
        default: null
      },
      // 按钮权限标识，外部使用者传入
      perms: {
        type: String,
        default: null
      },
      // 所属类型CODE
      belongCode: {
        type: String,
        // required: true,
        default: function () {
          return null
        }
      },
      // 所属业务ID
      belongID: {
        type: String,
        // required: true,
        default: function () {
          return null
        }
      },
      // 限制文件类型
      fileType: {
        type: String,
        default: function () {
          return '.zip'
        }
      },
      // 限制文件大小(M)
      fileSize: {
        type: Number,
        default: function () {
          return 50
        }
      },
      // 文件管理服务上传地址
      uploadApi: {
        type: String,
        // required: true,
        default: function () {
          return httpConfig.MID_FILE + '/api/file/file/batch'
        }
      },
      // 行数据
      rowData: {
        type: Object,
        default: function () {
          return null
        }
      },
      // 行号
      rowIndex: {
        type: Number,
        default: function () {
          return null
        }
      },
      // 按钮大小
      btnSize: {
        type: String,
        default: function () {
          return 'small'
        }
      },
      btnDisplay: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      // index
      index: {
        type: Number,
        default: function () {
          return null
        }
      },
      // 批量上传按钮显示内容
      batchUploadName: {
        type: String,
        default: function () {
          return this.$i18n.messages[this.$i18n.locale].common.batchUpload
        }
      }
    },
    data () {
      return {
        fullscreenLoading: false,
        headers: {
          'Authorization': 'Bearer ' + store.getters.token,
          '__token__': store.getters.token, // TODO GET TOKEN
          '__client__': '-1',
          'tenantId': '-1',
          '__orgId__': store.getters.tenantId
        }
      }
    },
    computed: {
      sendData: function () {
        return {
          belongCode: this.belongCode,
          belongID: this.belongID
        }
      }
    },
    methods: {
      beforeUpload (file) {
        if (!this.UtilJs.isNull(this.fileSize) && file.size / 1024 > this.fileSize * 1024) {
          this.warning(`已超出上传文件最大限制${this.fileSize}M`)
          return false
        }
        var fileType = '.' + file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
        if (!this.UtilJs.isNull(this.fileType)) {
          var fileTypeFlag = 0
          var fileTypeList = this.fileType.toLowerCase().split(',')
          fileTypeList.forEach(it => {
            if (fileType === it) {
              fileTypeFlag = 1
            }
          })
          if (fileTypeFlag === 0) {
            this.warning('只能上传' + this.fileType.toLowerCase().replace(/\./g, '') + '文件')
            return false
          }
        }
        this.fullscreenLoading = this.$loading({
          lock: true,
          text: '上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        return true
      },
      uploadSuccess (response) {
        if (response.code !== 0) {
          this.fullscreenLoading.close()
          this.error(response.message)
          return
        }
        let returnData = {}
        returnData.rowData = this.rowData
        returnData.rowIndex = this.rowIndex
        returnData.index = this.index
        returnData.fileList = response.data
        this.$emit('uploadSuccess', returnData)
        this.fullscreenLoading.close()
      }
    }
  }
</script>

<style scoped>
  .upload{
    display:inline-block;
    margin-left: 10px;
  }
</style>
